<template>
	<view>
		<view class="tou">
			<view class="status_bar">
			    <!-- 这里是状态栏 -->
			   </view>
			<view class="top">
				<image src="../../static/shu/jt1.png" mode="" class="jt" v-model="syy" @click="fanhui(syy)"></image>
				<view class="zi">我的售出</view>
			</view>
			
			
			<view class="goods">
				<view class="__bdi">
					点击进入商品详情页
				</view>
				<view class="_good" v-for="(item,index) in order" :key="index" v-model="item.skuId" @click="tiaozhuan(item.skuId)">
					<view class="name" v-model="item.name">商品名称：{{item.name}}</view>
					<view class="status" v-model="item.status" >商品状态：{{item.status}}</view>
					<view class="address" v-model="item.phone">发货电话：{{item.phone}}</view>
					<view class="address" v-model="item.address">发货地址：{{item.address}}</view>
					<view class="address" v-model="item.track">快递单号：{{item.track}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				syy:{
					url:"../../pages/my/my"
				},
				order:[]
			}
		},
		created() {
			const requrl = getApp().globalData.login +'/order/sell/list';
			console.log("aaa");
			this.$axios({
				url:requrl,
				method:'GET',
				// async:false,
				params:{
					uId:1,
				},
				}).then(({data})=>{
					if(data.code==0){
						this.order=data.data;
						this.order.map((item)=>{
							if(item.status==0){
								item.status="未发货";
							}
							if(item.status==1){
								item.status="已发货";
							}else{
								item.status="已收货";
							}
						})
					}else{
						alert(data.msg);
					}
				});	
			
		},
		methods: {
			fanhui(e){
				uni.switchTab({
					url: e.url
				})
			},
			tiaozhuan(e){
				uni.navigateTo({
					url:"../../pages/index/xiangqing?id="+e
				})
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		  height: var(--status-bar-height);
		  width: 100%;
		  
		 }
		 .tou{
		 	position: fixed;
		 	height: 100upx;
		 	width: 100%;
		 	z-index: 5;
		 	top: 0;
		 	left: 0;
		 	background-color: #50d8be;
		 	box-sizing: border-box;
		.top{
			width: 100%;
			height: 90upx;
			background-color: #50d8be;
			position: relative;
			display: flex;//弹性布局
			align-items: center;
			justify-content: center;
			.jt{
				position: absolute;
				width: 45upx;
				height: 45upx;
				left: 50upx;
				font-size: 45upx;
				
			}
			.zi{
				position: absolute;
				color: #393939;
				font-size: 45upx;
				border-bottom: 6upx #FFFFFF solid;
				font-weight: bold;
			}
		}
		
	}
	
	.goods{
		width: 100%;
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		.__bdi{
			margin:40upx auto;
			font-size:30upx;
			color: #5f5f5f;
		}
		._good{
			border-radius: 20upx;
			margin-bottom: 40upx;
			width: 90%;
			padding: 20upx;
			position: relative;
			background-image: url(../../static/shu/goosbj.jpg);
			font-size: 30upx;
			font-weight: bold;
			color: #000000;
		}
		
	}
</style>
